<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <% 
String path = request.getContextPath(); 
// 获得项目完全路径（假设你的项目叫MyApp，那么获得到的地址就是 http://localhost:8080/MyApp/）: 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 
<!DOCTYPE html>
<html>
<head>
<base href=" <%=basePath%>"> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="用户注册">
<meta name="author" content="xwj">
<title>天天书城注册</title>

    <link rel="stylesheet" href="css/user_css/css/font-awesome.min.css" />
     <link href="public_user/style.css" rel="stylesheet">
  <link rel="stylesheet" href="css/user_css/css/register/css/normalize.css">
  <link rel="stylesheet" href="css/user_css/css/register/css/style.css">   
	<link href="bootstrap/bootstrap.css" rel="stylesheet">
 <script src="jquery/jquery-2.2.4.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="bootstrap/bootstrapvalidator/js/bootstrapValidator.min.js"></script>
  <script>
  $(function() {
		 //表单验证
		 $("#reg_form")[0].reset();
	    $("#reg_form").bootstrapValidator({
	      message : 'This value is not valid',
	      feedbackIcons : {/*输入框不同状态，显示图片的样式*/
	        valid : 'glyphicon glyphicon-ok',
	        invalid : 'glyphicon glyphicon-remove',
	        validating : 'glyphicon glyphicon-refresh'
	      },
	      fields : {/*验证*/
	        uname : {/*键名username和input name值对应*/
	          message : 'The cname is not valid',
	          validators : {
	            notEmpty : {/*非空提示*/
	              message : '用户名不能为空'
	            },
	            stringLength : {/*长度提示*/
	              min : 3,
	              max : 16,
	              message : '用户名的长度必须在3到16之间'
	            },/*最后一个没有逗号*/
                remote:{ //查询是否有相同的用户名
                	url:"userMsg/getUserByName.do",
                	type:"post",
                	data:{"uname":$("input[name='uname']").val()},
                	delay:1000, //1s后执行ajax
                	dataType:"json",
                	message:"该用户名已存在"//提示信息
                }
	          }
	        },
	       upassword : {
	          message : 'The cdesc is not valid',
	          validators : {
	            stringLength : {/*长度提示*/
	            	 min : 6,
	              max : 64,
	              message : '密码的长度必须在6到16之间'
	            },
	            regexp: {
                 	regexp: /^[a-zA-Z0-9_]{0,}$/,
                 	message: '密码必须是字母或数字' 
                 }
	          }
	        },
         repass: {
             message:'密码无效',
             validators: {
                 notEmpty: {
                     message: '不能为空'
                 },
                 identical: {
                 	field: 'upassword',
                 	message: '两次密码必须一致'
                 }
             }
         }, 
         utel: {
             message: 'The username is not valid',
             validators: {
                 notEmpty: {/*非空提示*/
                     message: '电话不能为空'
                 },
                 regexp: {
                 	regexp: /^1[34578]\d{9}$/,
                 	message: '存在不符合的字符' 
                 },
                 stringLength: {/*长度提示*/
                     min: 11,
                     max: 11,
                     message: '电话长度必须是11位'
                 }
                 
             }
         }
	      }
	    });
	});
	
	//注册用户
	function register() {
		var bv = $("#reg_form").data('bootstrapValidator');
		bv.validate();
		if (!bv.isValid()) {
			return;
		}
		if (!confirm("确认要注册吗?")) {
			return;
		}
		var uname=$("input[name='uname']").val();
		var upassword=$("input[name='upassword']").val();
		var utel=$("input[name='utel']").val();
		$.ajax({
			url : 'userMsg/registerNewUser.do',
			type : 'POST',
			async : "true",
			data : {
				"uname":uname,
				"upassword":upassword,
				"utel":utel
			},
			dataType : 'json',
			success : function(data) {
				if (data.res == 1) {
					alert("注册成功");
					$("#reg_form")[0].reset();
					window.location.replace("public_user/index.jsp");
				}
			}
		});
		}
		</script>
  
  
</head>
<body >
<!--header start-->
    <%@include file="header.jsp"%>  
   <%--  <jsp:include page="header.jsp"/> --%>
      <!--header end-->
    
       <!-- main-start -->
       <div class="reg_main">
       <div class="reg_div">
       <div class="p_div"><p>用户注册</p></div>
<form class="form-horizontal" role="form" id="reg_form">
 <div class="form-group">
              <label for="uname" class="col-sm-3 control-label">用户名</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" name="uname" id="uname"
                   placeholder="用户名" />
              </div>
            </div>
           <div class="form-group">
              <label for="upwd" class="col-sm-3 control-label">密码</label>
              <div class="col-sm-8">
                <input type="password" class="form-control" name="upassword" id="upwd"
        		  placeholder="密码" />
              </div>
            </div>
     	<div class="form-group">
              <label for="firstname" class="col-sm-3 control-label">确认</label>
              <div class="col-sm-8">
                <input type="password" class="form-control" name="repass" id=""
                   placeholder="确认密码" />
              </div>
            </div>
           <div class="form-group">
              <label for="firstname" class="col-sm-3 control-label">电话</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" name="utel" id="" maxlength="11" 
                   placeholder="电话" />
              </div>
            </div>
    
        <button  class="my_btn" onClick="register()">注册</button>
     
    </form>
  </div>
  </div>
        
         <!-- main-end -->
         <!--footer start-->
   <%@include file="footer.jsp"%>
   <!--footer end-->
        <!-- owl.carousel js -->
         <script src="css/user_css/js/owl.carousel.min.js"></script>
      <!--   meanmenu js -->
        <script src="css/user_css/js/jquery.meanmenu.js"></script>
    <!--     countdown js -->
        <script src="css/user_css/js/countdown.js"></script>
        <!-- jquery.nivo.slider.pack js -->
        <script src="css/user_css/js/jquery.nivo.slider.pack.js"></script>
      <!--   jquery-ui.min.js -->
        <script src="css/user_css/js/jquery-ui.min.js"></script>
      <!--   wow js -->
        <script src="css/user_css/js/wow.min.js"></script>
        <!-- plugins js -->
        <script src="css/user_css/js/plugins.js"></script>
        <!-- main js -->
        <script src="css/user_css/js/main.js"></script> 
        
</body>
</html>